<template>
    <div class="container">
        <h2 class="text-2xl font-medium mb-6">课程分类</h2>
        <el-row>
            <el-col :span="6" v-for="(category, index) in categories" :key="index"
                class="bg-white rounded-lg p-6 cursor-pointer transform transition hover:scale-105">
                <div class="w-full h-40 rounded-lg overflow-hidden mb-4">
                    <img :src="category.image" :alt="category.title" class="w-full h-full object-cover object-top">
                </div>
                <h3 class="text-lg font-medium mb-2">{{ category.title }}</h3>
                <p class="text-gray-600 text-sm">{{ category.description }}</p>
            </el-col>
        </el-row>

        <!-- 课程日历 -->
        <div class="max-w-7xl mx-auto px-4 mt-12 mb-12">
            <h2 class="text-2xl font-medium mb-6">课程日历</h2>
            <div class="bg-white rounded-lg p-6">
                <el-calendar v-model="date" ref="dateRef">
                    <template #header="{ date }">
                        <div class="w-full flex justify-between">
                            <span>{{ date }}</span>
                            <div class="w-20 flex justify-between">
                                <el-icon class="cursor-pointer" @click="selectDate('prev-month')">
                                    <ArrowLeftBold />
                                </el-icon>
                                <el-icon class="cursor-pointer" @click="selectDate('next-month')">
                                    <ArrowRightBold />
                                </el-icon>
                            </div>
                        </div>
                    </template>
                    <template #dateCell="{ data }">
                        <div class="calendar-cell">
                            <!-- {{ data }}
                            <p :class="{ 'text-primary-600': hasClass(data.day) }">
                                {{ data.day.split('-').slice(2).join('') }}
                            </p> -->
                            <p class="w-full h-full flex items-center justify-center"
                                :class="[data.date >= selectedWeekRange[0] && data.date <= selectedWeekRange[1] ? 'is-week' : '']"
                                @click="changeDate(data.date)">
                                {{ data.day.split('-').slice(2).join() }}
                                {{ data.isSelected ? '✔️' : '' }}
                            </p>
                            <!-- <div v-if="hasClass(data.day)" class="text-xs text-gray-600 mt-1">
                                {{ getClassInfo(data.day) }}
                            </div> -->
                        </div>
                    </template>
                </el-calendar>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref,onMounted,watch} from 'vue';
import { Calendar } from '@element-plus/icons-vue';

const date = ref(new Date());

const categories = ref([
    {
        title: '孕期营养',
        description: '专业营养师定制饮食方案，助力健康孕期',
        image: 'https://ai-public.mastergo.com/ai/img_res/ea6bce692f914c00db281be2f9df3d06.jpg'
    },
    {
        title: '分娩准备',
        description: '专业助产士指导，让分娩更轻松自信',
        image: 'https://ai-public.mastergo.com/ai/img_res/edd58386a651130686f235f64ab87671.jpg'
    },
    {
        title: '产后恢复',
        description: '科学恢复计划，守护产后身心健康',
        image: 'https://ai-public.mastergo.com/ai/img_res/306c52001c1bab6e1a942a12fc2e1891.jpg'
    },
    {
        title: '新生儿护理',
        description: '新手父母必修课，掌握育儿技能',
        image: 'https://ai-public.mastergo.com/ai/img_res/77c2062d065b4ec2bbde09115abd2f8a.jpg'
    }
]);

const courses = ref([
    {
        title: '孕期营养与饮食指导',
        description: '营养师王丽娜主讲，详解孕期营养需求与食谱规划',
        price: '¥ 299',
        image: 'https://ai-public.mastergo.com/ai/img_res/5012d508872281b3aeffb9cd3a8200a4.jpg'
    },
    {
        title: '分娩减痛技巧实操',
        description: '助产士张雪梅带您掌握自然分娩减痛要点',
        price: '¥ 399',
        image: 'https://ai-public.mastergo.com/ai/img_res/98ba017aa6e43ab8edac09459a94e1d6.jpg'
    },
    {
        title: '新生儿护理技能培训',
        description: '儿科护士长刘春燕教您新生儿日常护理要领',
        price: '¥ 349',
        image: 'https://ai-public.mastergo.com/ai/img_res/70fc24489bd7013ed26a8ed3f7d5968d.jpg'
    }
]);

const classSchedule = {
    '2024-01-15': '孕期营养课程 14:00',
    '2024-01-18': '分娩准备课程 15:30',
    '2024-01-20': '新生儿护理 10:00',
    '2024-01-25': '产后恢复课程 16:00'
};

const lastWeekStart = ref('');
const lastWeekEnd = ref('');

const getLastTwoWeeksRange = () => {
    const now = new Date();
    // const start = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    const end = new Date(now.getFullYear(), now.getMonth(), now.getDate()+7);
    lastWeekStart.value = now;
    lastWeekEnd.value = end;
};

onMounted(() => {
    getLastTwoWeeksRange();
})

const dateRef = ref()
const selectedWeekRange=ref([])
// 切换日期月份
const selectDate = value => {
    if (!dateRef.value) return
    dateRef.value.selectDate(value)
}

const changeDate = (selectDate)=>{
    console.log("选择是间是:>>",selectDate)
}


watch(
    date,
    (newValue) => {
        // 获取用户选择的日期
        const selectedDate = new Date(newValue);

        // 获取用户选择日期是所在周的第几天（周日为0，周一为1，以此类推）
        const dayOfWeek = selectedDate.getDay();

        // 计算周一的日期 
        let monday = new Date(selectedDate);
        monday.setDate(selectedDate.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1));

        // 计算周日的日期
        let sunday = new Date(selectedDate);
        sunday.setDate(selectedDate.getDate() + (7 - dayOfWeek) + (dayOfWeek === 0 ? -7 : 0));

        selectedWeekRange.value = [monday, sunday];
    }, { immediate: true }

)
const hasClass = (day) => {
    return !!classSchedule[day];
};

const getClassInfo = (day) => {
    return classSchedule[day];
};
</script >
<style lang="less" scoped>
.calendar-cell {
    height: 100%;
    padding: 4px;
}

.calendar-cell:hover {
    background-color: #f3f4f6;
    border-radius: 4px;
}

:deep(.el-calendar-table .el-calendar-day) {
    height: 80px;
    padding: 4px;
}

:deep(.el-button) {
    border-radius: 20px;
}

.text-primary-600 {
    color: hsl(221, 83%, 53%);
}
</style>